
<template>
	<div class="mission-main">
		<!-- nav -->
		<div class="mission-ul">
			<ul>
				<li v-for="(item,index) in navList" v-bind:class="nowId==item.id?'mission-avtive':''" v-on:click="TabFn(index)">{{item.name}}</li>
			</ul>
		</div>
		<!-- tablist -->
		<div class="mission-tablist">
			<div class="mission-tab-box">
				<div class="tab-box-div" v-for="(item,index) in tabList" v-show="index==nowId">
					<div class="tab-box-main">
						<ul>

							<li v-for="list in item.child" :class="list.name.startsWith('京东')?'gray':''">
                <router-link tag="a" :to="{name:'task',query:{platform:list.params,mainType}}"
                             class="link" style="width: 100%;height: 100%"

                >
                  <a><img :src="list.url"/></a>
                  <a>{{list.name}}</a>
                </router-link>

							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
	</div>
</template>

<script>
	import IndexFooter from '@/components/base/IndexFooter'
	export default{
		name:'mission',
		data(){
			return{
				navList:[
					{
						name:'浏览任务',
						id:0
					},
					{
						name:'垫付任务',
						id:1
					},
					{
						name:'敬请期待',
						id:2
					},
					{
						name:'敬请期待',
						id:3
					},
				],
				tabList:[
					{
						child:[
              {
                url:require('static/imgs/taoBaoH.png'),
                name:'淘宝浏览任务',
                params:'淘宝'
              },
							{
                url:require('static/imgs/jingDongH.png'),
								name:'京东浏览任务',
                params:'京东'
							},

						]
					},
					{
						child:[
              {
                url:require('static/imgs/taoBaoH.png'),
                name:'淘宝任务',
                params:'淘宝'
              },
							{
                url:require('static/imgs/jingDongH.png'),
                name:'京东任务',
                params:'京东'
							},

						]
					},
					{
						child:[
						]
					},
					{
						child:[
						]
					}
				],
				nowId:0,
        mainType:''
			}
		},
    created(){
		  this.nowId=this.$route.query.tab?this.$route.query.tab*1:0
    },
		methods:{
			TabFn:function(el){
				this.nowId = el;
			}
		},
		components: {
			IndexFooter
		},
    watch:{
      nowId:{
        immediate:true,
        handler(newVal){
          if(newVal===0){
            this.mainType='browse'
          }else if(newVal===1){
            this.mainType='pay'
          }

        },
      }
    }
	}
</script>

<style>
	.mission-main{
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin-top: 0.18rem;
	}
	.mission-ul{
		width:90%;
		margin: 0 auto;
		height: 0.36rem;
		border: 0.01rem solid #6d8eb9;
		border-radius: 0.05rem;
	}
	.mission-ul ul li{
		width: 25%;
		float: left;
		border-right: 0.01rem solid #6d8eb9;
		color: #6d8eb9;
		font-size: 0.12rem;
		line-height: 0.36rem;
		text-align: center;
	}
	.mission-ul ul li:last-child{
		width: 24%;
		border-right: none;
	}
	.mission-ul ul .mission-avtive{
		background: rgb(142,10,190);
		color: white;
	}
	.mission-tablist{
		width: 100%;
		height: 100%;
		margin-top: 0.18rem;
	}
	.tab-box-main ul li{
		width: 100%;
		height: 0.5rem;
		line-height: 0.5rem;
		border-bottom: 0.01rem solid #e6e6e6;
		background: white;
	}
	.tab-box-main ul li .link a{
		display: inline-block;
		float: left;
		color: #2f302a;
		font-size: 0.14rem;
	}
	.tab-box-main ul li .link a:first-child{
		width: 0.32rem;
		height: 0.32rem;
		margin: 0.08rem 0.13rem 0 0.09rem;
	}
	.tab-box-main ul li .link a:first-child img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.tab-box-main ul li .link a:last-child{
		margin-right: none;
	}
</style>





